<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        ul{
            overflow: hidden;
        }
        li{
            list-style: none;
            float: left;
            padding: 5px 5px;
        }

    </style>
    <script src="../../baiduTemplate.js"></script>
    <script src="../../jquery1.11.1.min.js"></script>

</head>
<body>
    <h6>北京</h6><button>切换城市</button>
    <div id="citypage">
        <p>热门</p>
        <ul id="hotList"></ul>
        <p>拼音</p>
        <ul id="pyList"></ul>
        <ul id="cityList"></ul>
    </div>

    <!--热门-->
    <script type="text/html" id="cytp">
        <%for(var i=0;i< arr.length;i++){%>
            <li><%=arr[i].name%></li>
        <%}%>
    </script>

    <!--拼音-->
    <script type="text/html" id="pytp">
        <%for(var i in pyObj){%>
            <li onclick="tab('<%=i%>')"><%=i%></li>
        <%}%>
    </script>

    <!--城市-->
    <script type="text/html" id="citytp">
        <%for(var i=0;i< arr.length;i++){%>
        <li><%=arr[i].name%></li>
        <%}%>
    </script>

    <script>
        var obj={};
        $.get("http://localhost:6500/src/data/city.json",function (res) {
            console.log(res);
            obj.arr=res.result.hotcity;
            obj.pyObj=res.result.citylist;
            $("#hotList").html(baidu.template("cytp",obj));
            $("#pyList").html(baidu.template("pytp",obj));
        })

        function tab(k) {
            var arr=obj.pyObj[k];
            var cityObj={};
            cityObj.arr=arr;
            $("#cityList").html(baidu.template("citytp",cityObj));
        }



    </script>
</body>
</html>